<template>
  <el-drawer title="数据管理" v-model="show" size="1440px" @open="onOpen">
    <div class="action" style="margin-bottom: 20px">
      <el-button type="primary" icon="plus" @click="pageActions.handleAdd()">
        添加
      </el-button>
    </div>

    <el-table :data="pageData.data" v-loading="pageData.loading" border>
      <el-table-column prop="name" label="数据名称"> </el-table-column>
      <el-table-column prop="value" label="数据值"> </el-table-column>
      <el-table-column prop="type" label="数据标识"> </el-table-column>
      <el-table-column prop="remark" label="备注" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="rank" label="排序"> </el-table-column>
      <el-table-column label="操作" width="300px" fixed="right">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            icon="edit"
            @click="pageActions.handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            icon="delete"
            @click="pageActions.handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 20px; display: flex; justify-content: flex-end">
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </div>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      type="drawer"
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
      size="512px"
    />
  </el-drawer>
</template>

<script setup>
import { http, usePageList } from "jax-node";

const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: Object,
});

const { pageData, pageActions } = usePageList({
  api: "/system/dict/data",
  type: "dialog",
  defaultDetail: { rank: 0 },
});

pageActions.getData = () => {
  return http({
    url: "/system/dict/data",
    params: {
      dictId: props.data?.id,
      page: pageData.page,
      pageSize: pageData.pageSize,
    },
  }).then(async (res) => {
    pageData.data = res.list;
    pageData.total = res.total;
    pageData.page = res.page;
    pageData.pageSize = res.pageSize;
  });
};

// 保存前
pageActions.handleBeforeSubmit = (detail) => {
  detail.dictId = props.data.id;
  // if (!detail.value) detail.value = detail.name
};

const show = computed({
  get: () => props.modelValue,
  set: (val) => emits("update:modelValue", val),
});

const json = computed(() => {
  const required = true;
  const miniInput = { style: "width:100px" };

  return [
    {
      name: "rank",
      label: "序号",
      type: "input-number",
      tips: "（数值越大越排前）",
    },
    { name: "name", label: "数据名称", required },
    { name: "value", label: "数据值" },
    { name: "type", label: "数据标示" },
    { name: "isConst", label: "常量", type: "switch" },
    { name: "remark", label: "备注", type: "textarea" },
  ];
});

const onOpen = () => {
  pageActions.initData();
};
</script>

<style lang="scss" scoped></style>
